<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE HTML>
<html>

<head>
  <title>添加宠物</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" href="${path}/pet/home/css/animate.css">
  <link rel="stylesheet" href="${path}/pet/home/css/bootstrap.css">
  <link rel="stylesheet" href="${path}/pet/login/css/login.css">
  <!-- jQuery -->
  <%--<script src="${path}/pet/home/js/jquery.min.js"></script>--%>
  <script src="${path}/pet/home/js/mobile_tab.js"></script>
  <script src="${path}/pet/home/js/jquery.bootstrap.js"></script>

  <%--<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">--%>
  <%--<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>--%>
</head>

<body>
<div id="page">
  <div class="page-inner">
    <header role="banner" style="height:auto;margin-bottom: 0px;">
      <div class="row">
        <div class="col-md-12 col-md-offset-0 text-left">
          <div class="tab-content" style="background-color: #FFF;padding: 0px 10px;">
            <form action="#">
              <div class="row form-group" style="margin-top: -3px;">
                <div class="col-md-12">
                  <label for="name">宠物名</label>
                  <input type="text" class="form-control" id="name" placeholder="请输入宠物名" autocomplete="off">
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="species">品种</label>
                  <input type="text" class="form-control" id="species" placeholder="请输入宠物品种" autocomplete="off">
                </div>
              </div>
              <div class="form-group ">
                <div class="myrow">
                  <div class='input-group date' style="width: 14em;" id='datetimepicker1'>
                    <label for="birthday">出生日期</label>
                    <input type="text" placeholder="请选择日期" id="birthday" style="width: 190%;">
                  </div>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="lisence">许可证号</label>
                  <input type="text" class="form-control" id="lisence" placeholder="请输入许可号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                  <div id="lisence1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为10的数字，请重新输入</div>
                  <div id="lisence2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">许可证号合格</div>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="immune">免疫证号</label>
                  <input type="text" class="form-control" id="immune" placeholder="请输入免疫证号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                  <div id="immune1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为6的数字，请重新输入</div>
                  <div id="immune2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">免疫证号合格</div>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="color">颜色</label>
                  <select class="form-control" id="color" style="height:48px;">
                    <option>黑色</option>
                    <option>黄色</option>
                    <option>白色</option>
                    <option>棕色</option>
                    <option>花色</option>
                  </select>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12" style="margin-bottom: 0px; margin-top: 0px;">
                  <label>性别</label>
                  <input type="radio" name="sex" id="sex1" value="女性">母
                  <input type="radio" name="sex" id="sex2" value="男性">公
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12" style="margin-bottom: -11px;margin-top: -13px;">
                  <label>节育</label>
                  <input type="radio" name="birthControl" id="birthControl1" value="是">是
                  <input type="radio" name="birthControl" id="birthControl2" value="否">否
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="chip">芯片号</label>
                  <input type="text" class="form-control" id="chip" placeholder="请输入芯片号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                  <div id="chip1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为13的数字，请重新输入</div>
                  <div id="chip2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">芯片号合格</div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </header>
  </div>
</div>
</body>

<script>
  $(function() {
    var itemId = "${param.itemID}";
    var user = "<%=session.getAttribute("user")%>";
    var uid = ${user.id};

    $('#birthday').datepicker({
      changeMonth: true, //显示月份下拉框
      changeYear: true, //显示年份下拉框
      dateFormat: 'yy-mm-dd' //设置日期显示格式为2017-12-09这种的，也可以选择其他的，比如“d M, y”格式的
    });

    //许可证号只能是数字
    $("#lisence").blur(function() {
      var lisence = $.trim($("#lisence").val());
      if (Number(lisence.value) == "NaN" || lisence.length != 10) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
        console.log(Number(lisence.value));
        $('#lisence1').show();
        $('#lisence2').hide();
      } else {
        $('#lisence2').show();
        $('#lisence1').hide();
      }
    });

    //免疫证号判断
    $("#immune").blur(function() {
      var immune = $.trim($("#immune").val());
      if (Number(immune.value) == "NaN" || immune.length != 6) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
        $('#immune1').show();
        $('#immune2').hide();
       } else {
        $('#immune2').show();
        $('#immune1').hide();
       }
    });

    //芯片号判断
    $("#chip").blur(function() {
      var chip = $.trim($("#chip").val());
      if (Number(chip.value) == "NaN" || chip.length != 13) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
        $('#chip1').show();
        $('#chip2').hide();
      } else {
        $('#chip2').show();
        $('#chip1').hide();
      }
    });
  });
</script>

<style>
  .regist{
    margin-top: -8em
  }
  #gtco-header .mt-text {
    margin-top: 5em;
    margin-bottom: 3em;
  }
  .row-mt-15em {
    margin-top: 22em;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0px;
    font-weight: bold;
  }
  .form-control {
    box-shadow: none;
    background: transparent;
    border: 2px solid rgba(0, 0, 0, 0.1);
    height: 46px;
    font-size: 16px;
    font-weight: 300;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: -10px;
  }
  .form-group {
    margin-bottom: 10px;
  }


  .regist {
    margin-top: -18em;
  }
  @media screen and (max-width: 768px){
    #gtco-header .mt-text {
      margin-top: 7em;
      margin-bottom: 3em;
      display: none;
    }
  }
  .row-mt-15em {
    margin-top: 20em;
  }

  #birthday {
    height: 46px;
    font-size: 16px;
    font-weight: 300;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: -10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
  }
  .form-control {
    line-height: 40px;
  }
</style>



</html>
